<!DOCTYPE html>
<html>
<head>
    <style>
        .login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);display: flex;flex-direction: column; }
        input, button { display: block; margin: 10px; padding: 8px; background: rgba(255,255,255,0.1); }
    </style>
</head>
<body>
    <div class="login-box">
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button>Login</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 粒子系统
        const particles = new THREE.BufferGeometry();
        const count = 2000;
        const posArray = new Float32Array(count * 3);
        for(let i = 0; i < count*3; i++) posArray[i] = (Math.random() - 0.5) * 5;
        particles.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
        
        const material = new THREE.PointsMaterial({ size: 0.005, color: 0x00ff88 });
        const particleMesh = new THREE.Points(particles, material);
        scene.add(particleMesh);

        camera.position.z = 2;

        function animate() {
            requestAnimationFrame(animate);
            particleMesh.rotation.y += 0.002;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>